<template>
    <div class="login">
        <loginHeader></loginHeader>
        <div class="main">
            <div class="appLogo"><img src="@/assets/img/AppLogo.png" alt=""></div>
            <div class="localPhone">
                <div class="title">使用本机号码一键登录</div>
                <div class="phoneNumber">{{localPhoneNumber}}</div>
            </div>
            <div class="btn_group">
                <van-button type="primary" round block color="rgb(2, 182, 253)" @click="onLogin">登录</van-button>
                <van-button type="default" round block @click="$router.replace('/loginPlus')">使用其他手机号登录</van-button>
                <van-field name="checkbox" class="agreement">
                    <template #input>
                        <van-checkbox v-model="checked" shape="circle">
                            未注册手机号登录后将自动生成账号，且代表你已阅读并同意
                            <a href="javascript:void(0)">《用户服务协议》</a>、
                            <a href="javascript:void(0)">《隐私政策》</a>和
                            <a href="javascript:void(0)">《运营商协议》</a>
                        </van-checkbox>
                    </template>
                </van-field>
            </div>
        </div>
        <!-- 弹出层 -->
        <checkAgreePrompt
            :showPopup="showPopup"
            :msgPopup="loadingPopup"
            @on-disagree="onDisagree"
            @on-agree="onAgree"
        ></checkAgreePrompt>
        <loginFooter></loginFooter>
    </div>
</template>

<script>
import loginHeader from './components/loginHeader.vue';
import loginFooter from './components/loginFooter.vue';
import checkAgreePrompt from './components/checkAgreePrompt.vue';
import {login} from '@/api/user';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { ref, reactive } from 'vue';
export default {
    name:'Login',
    setup(){
        const store = useStore();
        const router = useRouter();
        const localPhoneNumber = store.state.localPhoneNumber.slice(0,3)+'****'+store.state.localPhoneNumber.slice(7,11);
        const checked = ref(false);
        const showPopup = ref(false);
        const loadingPopup = reactive({
            status:false,
            message:'loading'
        });
        const onLogin = () => {
            if(checked.value){
                loadingPopup.status = true;
                login({
                    type:'phone',
                    phone:store.state.localPhoneNumber
                }).then((res)=>{
                    if(res.code == '1200' || res.code == '1100'){
                        console.log(res.message);
                        store.commit('SET_TOKEN',JSON.stringify(res.data));
                        localStorage.setItem('token',JSON.stringify(res.data));
                        store.commit('SET_USERNAME',res.data.username);
                        localStorage.setItem('username',res.data.username);
                        store.commit('SET_ID',res.data._id);
                        localStorage.setItem('userId',res.data._id);
                        store.commit('SET_USER',res.data);
                        setTimeout(() => {
                            loadingPopup.status = false;
                            history.back();
                        }, 1500);
                    }
                }).catch((error)=>{
                    console.log(error);
                })
            }
            else{
                showPopup.value = true;
            }
        }
        const onAgree = () => {
            checked.value = true;
            showPopup.value = false;
            onLogin();
        }
        const onDisagree = () => {showPopup.value = false;}
        return{
            localPhoneNumber,
            checked,
            showPopup,
            loadingPopup,
            onLogin,
            onAgree,
            onDisagree,
        }
    },
    components:{
        loginHeader,
        loginFooter,
        checkAgreePrompt
    }
}
</script>

<style>
.login{
    width: 100%;
    height: 100%;
    background: #fff;
}
.login .main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* app Logo */
.login .main .appLogo{
    margin: 40px 0;
    height: 50px;
    text-align: center;
}
.login .main .appLogo img{
    height: 100%;
}
/* 本机号码 */
.login .main .localPhone{
    text-align: center;
}
.login .main .localPhone .title{
    font-size: 0.875rem;
    color: rgb(134, 132, 132);
}
.login .main .localPhone .phoneNumber{
    margin: 20px 0;
    font-size: 2rem;
}
/* 按钮 */
.login .main .btn_group{
    padding: 0 25px;
    width: 100%;
    box-sizing: border-box;
}
.login .main .btn_group .van-button{
    margin-top: 15px;
}
/* 协议 */
.login .main .btn_group .agreement{
    margin-top: 15px;
    padding: 0;
    font-size: 0.625rem;
    color: #aaa;
}
.login .main .btn_group .agreement .van-checkbox{
    margin: 0;
    align-items: flex-start;
}
.login .main .btn_group .agreement .van-checkbox .van-checkbox__icon{
    height: 0.625rem;
}
.login .main .btn_group .agreement .van-checkbox__icon{margin-top: 3px;}
.login .main .btn_group .agreement .van-checkbox__icon .van-icon{
    border-radius: 50%;
    width: 0.875rem;
    height: 0.875rem;
    line-height: 1.23;
    font-size: 0.625rem;
}
.login .main .btn_group .agreement .van-checkbox__icon--checked .van-icon{
    background-color: #02b6fd;
    border-color: #02b6fd;
}

/* 弹出框 */
.popAgree{
    margin: 0 25px;
    border-radius: 0.875rem;
    padding: 25px;
}
.popAgree label{color: rgb(127, 127, 127);}
.popAgree .btn_group{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
.popAgree .btn_group .van-button{
    width: 48%;
    font-size: 1rem;
}
.popLoading{
    padding: 25px;
    border-radius: 0.875rem;
    background: rgba(255,255,255,0.5);
}
</style>